<template>
  <div class="Article">
    <h1>Article</h1>
    <vue-markdown :source="article.markdown" class="content">
      Loading...
    </vue-markdown>
  </div>
</template>

<script>
  import axios from "axios";
  import VueMarkdown from 'vue-markdown'

  export default {
    name: "Article",
    components: {
      VueMarkdown
    },
    data() {
      return {
        article: {}
      }
    },
    created() {
      const id = this.$route.params.id
      axios({
        url: `https://gank.io/api/v2/post/${id}`
      }).then(res => {
        this.article = res.data.data
        console.log(res)
      })
    }
  };
</script>
<style>
  .content {
    width: 800px;
    margin: 0 auto;
    border: 2px solid #1da2f0;
    padding: 20px;
  }
</style>